<template>
    <div>
        <div class="wrap">
            <h4>
                {{classify[0].name}}
            </h4>
            <ul>
                <li v-for="item in classify[0].child"
                    :key="item.id"
                    @click="gradeCheck(item.id)"
                    :class="{'change':item.id === gradeIndex}"
                >{{item.name}}
                </li>
            </ul>
        </div>
        <div class="wrap">
            <h4>
                {{classify[1].name}}
            </h4>
            <ul>
                <li v-for="item in classify[1].child"
                    :key="item.id"
                    @click="subjectCheck(item.id)"
                    :class="{'change':item.id === subjectIndex}"
                >{{item.name}}
                </li>
            </ul>
        </div>

        <div class="btn">
            <button @click="reset">重置</button>
            <button @click="fix" class="ceb">确定</button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "classify",
        props: {},
        data() {
            return {}
        },
        computed: {
            classify() {
                console.log(this.$store.state.course.classify)
                return this.$store.state.course.classify;
            },
            gradeIndex() {
                return this.$store.state.course.gradeIndex;
            },
            subjectIndex() {
                return this.$store.state.course.subjectIndex;
            },
        },
        mounted() {

        },
        methods: {
            gradeCheck(id) {
                this.$store.commit('reset', {name: 'gradeIndex', id: id})
            },
            subjectCheck(id) {
                this.$store.commit('reset', {name: 'subjectIndex', id: id})
            },
            reset() {
                this.$store.commit('reset')
                this.$emit('reset')//重置事件
            },
            fix() {
                this.$store.commit('getBasis')

                this.$emit('reset')//确定事件
            }
        },
    }
</script>

<style scoped lang="scss">
    .wrap {
        width: 95%;
        margin: 40px auto;
        border-bottom: .3px solid #999;
        padding: 10px 0;

        h4 {
            font-size: 23px;
            color: #868686;
            padding-left: 20px;
        }

        ul {
            margin: 10px 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;


            li {
                font-size: 30px;
                padding: 10px 35px;
                background-color: rgba(238, 238, 238, 0.84);
                margin: 10px 20px;
                color: #6c757d;
                border-radius: 5px;

                &.change {
                    background-color: #EBEEFE;
                    color: #EB6100;
                }
            }
        }
    }

    .btn {
        width: 95%;
        margin: 40px auto;
        display: flex;
        justify-content: space-between;
        align-items: center;


        button {
            width: 48%;
            line-height: 55px;
            border: .5px solid #999;
            border-radius: 3px;
            color: rgba(137, 137, 137, 1);
            background-color: #fff;

            &.ceb {
                background-color: #EB6100;
                color: #fff;
                border: .5px solid #EB6100;
            }
        }
    }
</style>